<!DOCTYPE html>
<html lang="en">
<head>
    <title>编辑未关闭事项</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="refresh" content="1200">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=86e2297f">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=222aea35">
    <style>
        .lineOne {
            text-align: left;
        }

        .lineOne span {
            max-height: 20px;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            text-align: left;
        }

        .div-td-content-more {
            position: absolute;
            height: auto;
            z-index: 999;
            line-height: 20px;
            background-color: #d3e8fd;
            padding: 8px 6px;
            border: 1px solid #e8e8ea;
            display: none;
        }

        .div-td-content-more i {
            width: 15px;
            height: 12px;
            background: url("/dist/img/more-icon.png");
            position: absolute;
            left: 50px;
            top: -12px;
        }

        .tdColor {
            width:190px;
            background-color: #f8f8f8;
        }
        .td-value {
            text-align: left !important;
            vertical-align: middle;
            word-wrap: break-word;
            color: #2a8cec !important;
        }

        .td-value span {
            display: inline-block;
            max-height: 56px;
            overflow: hidden;
            padding: 0 6px;
            word-wrap: break-word;
            text-align: center !important;
        }
        .td-value1 {
            text-align: left !important;
            vertical-align: middle;
            word-wrap: break-word;
            color: #2a8cec !important;
        }
        .td-value1 .user{
            display: inline-block;
            float: left;
            overflow: hidden;
            cursor: pointer;
        }
        .user.select{
            color: #fff;
            background-color: #045B9E;
        }
        .td-value1 input,textarea{
            width: 100%;
            border: 0;
            outline: none;
            padding-left: 5px;
        }
    </style>
</head>
<body>
<section class="content" id="app">
    <table class="table table-bordered text-center table-width">
        <tbody>
            <tr>
                <td class="tdColor">标题</td>
                <td colspan="3" class="td-value1">
                    <input type="text" v-model="detailParm.trackTitle"/>
                </td>
            </tr>
            <tr>
                <td class="tdColor">负责人</td>
                <td class="td-value1">
                    <div id="principal" style="padding-left:6px;"
                    v-on:click.stop="inputFocus('txtCopier')">
                    <div v-for="(user,i) in detailParm.principal" class="user"
                        v-bind:class="{ select: principalSelectedIdx == i }"
                        v-on:click="selectUser(i,'principalSelectedIdx')">{{user.userName}};
                    </div>
                    <input class="pull-left principal" id="txtCopier" style="width:100px"
                        type="text" @keyup.delete="delPrincipal"/>
                    </div>
                </td>
                <td class="tdColor">预计结束日期</td>
                <td class="td-value1">
                    <input type="text" @focus="showDatePicker($event,detailParm)" v-model="detailParm.predictTime"/>
                </td>
            </tr>
            <tr>
                <td class="tdColor">参与人</td>
                <td colspan="3" class="td-value1">
                    <div id="cyrPerson" style="padding-left:6px;">
                        <div v-for="(user,i) in detailParm.cyrPerson" class="user"
                            v-bind:class="{ select: cyrPersonSelectedIdx == i }"
                            v-on:click="selectUser(i,'cyrPersonSelectedIdx')">{{user.userName}};
                        </div>
                        <input class="pull-left cyrPerson" style="width:100px"
                            type="text" @keyup.delete="delcyrPerson"/>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="tdColor">抄送人</td>
                <td colspan="3" class="td-value1">
                    <div id="csrPerson" style="padding-left:6px;"
                        v-on:click.stop="inputFocus('txtCopier')">
                        <div v-for="(user,i) in detailParm.csrPerson" class="user"
                            v-bind:class="{ select: csrPersonSelectedIdx == i }"
                            v-on:click="selectUser(i,'csrPersonSelectedIdx')">{{user.userName}};
                        </div>
                        <input class="pull-left csrPerson" id="txtCopier" style="width:100px"
                            type="text" @keyup.delete="delcsrPerson"/>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="tdColor">内容</td>
                <td colspan="3" class="td-value1">
                    <textarea rows="5" style="width: 450px;" v-model="detailParm.trackContent"></textarea>
                </td>
            </tr>
        </tbody>
    </table>
    <div class="south" style="height:50px;line-height:50px;text-align:center;">
        <input type="button" value="保存" class="btn oaBtn btn-sm" @click="submitData()"/>
    </div>
</section>
<!--JQ-->
<script src="/dist/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="/dist/plugins/bootstrap/js/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=8e743a31"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=54c6b89c"></script>
<script type="text/javascript" src="/dist/plugins/vue/vue.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script type="text/javascript" src="/dist/plugins/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript">
    var api = frameElement.api, W = api.opener;
    var app = new Vue({
        el: '#app',
        data: {
            pageType:"add",  //add or edit
            csrPersonSelectedIdx: -1,
            cyrPersonSelectedIdx:-1,
            principalSelectedIdx:-1,
            detailParm:{
                id:"",
                principal:[],  //负责人
                csrPerson:[],  //抄送人
                cyrPerson:[],  //参与人
                trackTitle:"",
                trackContent:"",
                predictTime:"", //预计结束日期
                userId:getCurrentUser().id
            }
        },
        methods: {
            submitData:function(){
                if(this.detailParm.trackContent==""){
                    alert("事项内容不能为空！");
                    return false;
                }
                if(this.pageType == "edit")
                this.detailParm
                 
                $.wyui.postMethod(urlConfig.wreport.wreportUnfinish.saveUnfinish, trimRN(this.detailParm), function (data) {
                    alert("操作成功");
                    parent.refresh(true);
                    api.close();
                });
            },
            showDatePicker: function (e, item) {
                WdatePicker({
                    onpicked: function (dp) {
                        item.predictTime = dp.cal.getNewDateStr();
                        return true;
                    }
                });
                $(e.target).blur();
            },
            selectUser: function (i, prop) {
                prop = -1;
                this[prop] = i;
            },
            delPrincipal: function (event) {
                if (event.keyCode == 46 || event.keyCode == 8 && event.target.value == "") {
                    if (this.principalSelectedIdx > -1) {
                        this.detailParm.principal.splice(this.principalSelectedIdx, 1);
                        this.principalSelectedIdx = -1;
                    } else {
                        this.principalSelectedIdx = this.detailParm.principal.length - 1;
                    }
                }
            },
            delcsrPerson: function (event) {
                if (event.keyCode == 46 || event.keyCode == 8 && event.target.value == "") {
                    if (this.csrPersonSelectedIdx > -1) {
                        this.detailParm.csrPerson.splice(this.csrPersonSelectedIdx, 1);
                        this.csrPersonSelectedIdx = -1;
                    } else {
                        this.csrPersonSelectedIdx = this.detailParm.csrPerson.length - 1;
                    }
                }
            },
            delcyrPerson: function (event) {
                if (event.keyCode == 46 || event.keyCode == 8 && event.target.value == "") {
                    if (this.cyrPersonSelectedIdx > -1) {
                        this.detailParm.cyrPerson.splice(this.cyrPersonSelectedIdx, 1);
                        this.cyrPersonSelectedIdx = -1;
                    } else {
                        this.cyrPersonSelectedIdx = this.detailParm.cyrPerson.length - 1;
                    }
                }
            },
            initDetail:function(){
                this.detailParm.id = $.wyui.page.urlParams.id;
                this.detailParm.trackTitle = $.wyui.page.urlParams.trackTitle;
                this.detailParm.trackContent = $.wyui.page.urlParams.trackContent;
                
                this.detailParm.predictTime = $.wyui.page.urlParams.predictTime;

                var principal = $.wyui.page.urlParams.principal;
                var principalName = $.wyui.page.urlParams.principalName;
                if(principal != "") {
                    var objPrincipal = {"id":principal,"userName":principalName}
                    this.detailParm.principal.push(objPrincipal);
                }

                var csrPersons = $.wyui.page.urlParams.csrPerson.split(';');
                var csrPersonNames = $.wyui.page.urlParams.csrPersonName.split(';');
                csrPersons.forEach((item , i) => {
                    if(item == "") return false;
                    var obj = new Object();
                    obj.id = item;
                    obj.userName = csrPersonNames[i];
                    this.detailParm.csrPerson.push(obj);
                });

                var cyrPersons = $.wyui.page.urlParams.cyrPerson.split(';');
                var cyrPersonNames = $.wyui.page.urlParams.cyrPersonName.split(';');
                cyrPersons.forEach((item , i) => {
                    if(item == "") return false;
                    var obj = new Object();
                    obj.id = item;
                    obj.userName = cyrPersonNames[i];

                    this.detailParm.cyrPerson.push(obj);
                });
            }
        },
        mounted: function () {
            this.pageType = $.wyui.page.urlParams.pageType;
            if(this.pageType == "edit"){
                this.initDetail();
            }
        }
    });
</script>
<script>
    $(function(){
        $(".csrPerson,.cyrPerson,.principal").autoComplete({
            url: server.ip + urlConfig.system.user.getTop10ByNameUser,
            render: function (users, panel) {
                for (var i = 0; i < users.length; i++) {
                    $("<li></li>").data("autoComplete",
                        users[i]).html("<a>" + users[i].name + "&nbsp;&nbsp;&nbsp;" +
                        "(" + "&nbsp;" + users[i].companyName + "-" + users[i].departName + "-" + users[i].roleName + "&nbsp;" + ") " + "</a>")
                        .appendTo(panel);
                }
            },
            selected: function (user) {
                if ($(this).hasClass("csrPerson")) {
                    var userIds = new Array();
                    for (var i = 0; i < app.detailParm.csrPerson.length; i++) {
                        userIds.push(app.detailParm.csrPerson[i].id);
                    }
                    if ($.inArray(user.id, userIds) == -1) {
                        app.detailParm.csrPerson.push({id: user.id, userName: user.name});
                        app.csrPersonSelectedIdx = -1;
                    } else {
                        alert("抄送人不能重复输入");
                    }
                    $(this).val("");
                }else if ($(this).hasClass("cyrPerson")) {
                    var userIds = new Array();
                    for (var i = 0; i < app.detailParm.cyrPerson.length; i++) {
                        userIds.push(app.detailParm.cyrPerson[i].id);
                    }
                    if ($.inArray(user.id, userIds) == -1) {
                        app.detailParm.cyrPerson.push({id: user.id, userName: user.name});
                        app.cyrPersonSelectedIdx = -1;
                    } else {
                        alert("参与人不能重复输入");
                    }
                    $(this).val("");
                }else if ($(this).hasClass("principal")) {
                    var userIds = new Array();
                    for (var i = 0; i < app.detailParm.principal.length; i++) {
                        userIds.push(app.detailParm.principal[i].id);
                    }
                    if (userIds.length == 0) {
                        app.detailParm.principal.push({id: user.id, userName: user.name});
                        app.principalSelectedIdx = -1;
                    } else {
                        alert("负责人只能输入一个");
                    }
                    $(this).val("");
                }
                return false;
            },
            height: 180,
            width: 300
        });

    });
</script>

</body>
</html>